<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../dist/vue.js"></script>
</head>
<body>
    <!-- 
        前端路由原理？ 两种实现方式有什么区别？

        路由原理：本质就是监听URL的变化，然后匹配路由规则,显示相应的页面,并且无须刷新页面。

        路由需要实现三个功能：
        1) 浏览器地址变化时，切换页面
        2) 点击浏览器的 【前进】 【后退】按钮时，网页内容跟随变化
        3) 刷新浏览器时，网页加载当前路由对应内容


        
        目前：前端使用的路由只有两种实现方式。
        1) Hash 模式
        2) History 模式

        一、Hash 模式
          1.点击跳转或者浏览器历史跳转：当#后面的哈希值发生变化时，不会向服务器请求数据，可以通过hashChange事件来监听到URL的变化，从而进行跳转页面
          2.手动刷新不会触发hashChange事件，可以采用load事件监听解析URL匹配相应的路由规则，跳转到相应的页面，然后通过DOM替换页面内容
        二、history模式
          1.History.back() 、History.forword() 、History.go() : 移动到以前访问过的页面时，页面通常是从浏览器缓存中加载，而不是重新要求服务器发送新的网页
          2.History.pushState(state, title, url) : 用于在历史中添加一条记录。接受三个参数：
            与添加记录相关的状态对象，新页面的标题， 必须与当前页面处于同一域下的新的url
            该方法不会触发页面刷新，只是导致History对象发生变化，地址栏会有反应，不会触发hashChange事件
          3.History.replaceState : 用来修改History对象的当前记录
        三、 Hash 模式 和 History 模式   对比：
          1. Hash模式只可以更改#后面的内容，History模式可以通过API设置任意的同源url
          2. History 模式可以通过API添加任意类型的数据到历史记录中，Hash模式只能更改哈希值，也就是字符串
          3. Hash模式无需后端配置，并且兼容性好。History 模式在用户手动输入地址或者刷新页面的时候会发起url请求，后端需要配置index.html页面，用于匹配不到静态资源的时候。
          


    -->
    <div id="app">
    </div>
</body>
<script>
    const vm = new Vue({
        el:'#app',
        data:{
        }
    })
</script>
</html>